<template>
	<nt-container>
		<view class="permissions">
			<view class="card">
				<view class="card-item">
					<view class="card-item--left">
						手机权限
						<view class="card-item--content"><text style="color:#f00">{{exceptionList.length}}</text>项权限异常</view>
					</view>
					<view class="card-item--right check">重新检测</view>
				</view>
				<view class="card-item">
					<view class="card-item--left">
						<text class="iconfont exception">&#xe6ae;</text>
						异常权限
						<view class="card-item--content flex" v-for="(it,index) in exceptionList" :key="index">
							{{it.label}}
							<view class="card-item--content__set" @click="toSetting(it)">
								设置<text class="iconfont arrow">&#xe622;</text>
							</view>
						</view>
					</view>
				</view>
				<view class="card-item">
					<view class="card-item--left">
						<text class="iconfont normal">&#xe614;</text>
						正常权限
					</view>
				</view>
			</view>
		</view>
	</nt-container>
</template>

<script>
import {
	checkSystemEnableLocation,
	gotoAppPermissionSetting,
	requestAndroidPermission
} from "@/utils/permision"
export default {
	data(){
		return {
			isCloseLocation: false
		}
	},
	computed: {
		exceptionList(){
			const arr = []
			if(!checkSystemEnableLocation()){
				arr.push({
					label: "手机定位权限异常",
					isGuide: false
				})
			}
			if(
				[-1, 0].includes(requestAndroidPermission())
			){
				arr.push({
					label: "应用定位权限异常",
					isGuide: true
				})
			}
			return arr
		}
	},
	methods: {
		toSetting(it){
			if(!it.isGuide){
				this.toast(`${it.label},前往手机设置页设置`)
				return;
			}
		}
	}
}
</script>

<style scoped lang="scss">
.card{
	padding: 30rpx;
	box-sizing: border-box;
	background:#fff;
	border-radius: 20rpx;
	margin: 20rpx;
	&-item{
		display:flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
		&--left{
			font-weight: bold;
			color:#333;
			font-size: 36rpx;
			flex: 1;
			width: 100%;
			.iconfont{
				margin-right: 10rpx;
				&.exception{
					color:#f00;
				}
				&.normal{
					color:#62DCAF
				}
			}
		}
		&--content{
			color:#666;
			font-weight: normal;
			font-size: 26rpx;
			margin-top: 20rpx;
			width: 100%;
			padding: 5rpx 0;
			&.flex{
				flex: 1;
				display:flex;
				align-items: center;
				justify-content: space-between;
				
			}
			&__set{
				.iconfont{
					font-size: 30rpx;
				}
			}
		}
		&--right{
			font-size: 26rpx;
			color:#333;
			text-align: right;
			flex: 1;
			.arrow{
				font-size: 30rpx;
			}
		}
		.check{
			color:var(--theme-color)
		}
	}
}
</style>